<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page isELIgnored="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title><c:out value="${pageTitle }">OoM-登录</c:out></title>
		<meta name="keywords" content="个人博客,wjyuian技术站" />
		<meta name="description" content="wjyuian技术站" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link href="/static/css/base.css" rel="stylesheet" />
		<link rel="icon" href="/static/img/logo.ico" type="image/x-icon" />

		<script src="/static/plugin/jquery.min.js"></script>

<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->

	<script>
	$(function() {
		$('#bgDiv').css({
			height : $(document).height() - 0 + 40 + 'px',
			width : $(document).width() + 40 + 'px',
			'margin-left' : -20 + 'px',
			'margin-top' : -20 + 'px'
		});
		
		resizeLoginDiv();
		
		$('#accountInput').focus();
		
		$(window).resize(function() {
			resizeLoginDiv();
		});
	});
	
	function resizeLoginDiv() {
		var obj = $('#loginDiv');
		var t = ($(document).height() - obj.height()) / 2 - 50;
		var left = ($(document).width() - obj.width()) / 2;
		
		console.log($(document).width(),  obj.width(), $(document).height());
		
		obj.css({
			'top' : t + 'px',
			'left' : left + 'px',
			display : 'block'
		});
	}
	</script>

<style type="text/css">
body {
	min-height: 100vh;
	box-sizing: border-box;
	margin: 0;
	padding-top: calc(50vh - 6em);
	font: 150%/1.6 Consolas, Palatina,serif;
}
 
body,main::before {
	background: url("/static/img/bg.jpg") 0 / cover fixed;
}
 
div.lineDiv1{
	padding-bottom : 20px;
}

div.lineDiv1 input::-webkit-input-placeholder {
	/* placeholder颜色  */
	color: #aab2bd;
	/* placeholder字体大小  */
	font-size: 12px;
	/* placeholder位置  */
	text-align: left;
	padding-left : 10px;
}

main {
	position: relative;
	margin: 0 auto;
	padding: 0.7em;
	padding-top :0.5em;
	max-width: 23em;
	width : 440px; 
	background: hsla(0,0%,100%,.25) border-box;
	overflow: hidden;
	border-radius: .3em;
	box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
		    0 .5em 1em rgba(10,10,10,0.7);
	text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}
 
main::before{
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -30px;
	z-index: -1;
	
	-webkit-filter: blur(10px);
	filter: blur(10px);
}
blockquote{
	margin-top : 20px;
	margin-bottom : 15px;
}
</style>
</head>
<body >

	<main>
		<blockquote>
			<form action="login" method="post">
				<div class="lineDiv1" style="text-align : center; color : #BBBBBB ; font-size : 25px; 
				padding-bottom : 15px;">
					<img src="/static/img/logo_nav.png" width="248" height="55" style="margin : auto;" />
				</div>
				<div class="lineDiv1" style="text-align : center;">
					<input type="text" name="account" placeholder="账号" id="accountInput" value="" class="inputStyle2" />
				</div>
				<div class="lineDiv1" style="text-align : center; padding-bottom : 7px;">
					<input type="password" name="password" placeholder="密码" value="" class="inputStyle2" />
				</div>
				
				<div style="color : red; padding-left : 50px; color : red ; text-shadow : 0px 0px 2px black; font-size : 13px;">
					&nbsp;
					<c:if test="${loginMessage != null }">
						${loginMessage }
					</c:if>
				</div>
				<div style="padding-top : 0px; padding-left : 70px;">
					&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
					<input type="submit" value="登&nbsp;录" class="btnStyle1" style="font-size : 15px; line-height : 16px; letter-spacing : 2px;
					background-color : #2758A5; " />
					
                    &nbsp;&nbsp;&nbsp;
                    <a href="/home" style="color : #EEEEEE; text-decoration : underline; font-size : 13px;">首页</a>
				</div>
			</form>
		</blockquote>
	</main
</body>
</html>